<template>
	<view class="container">
		<!-- 搜索框 -->
		<view class="search-bar">
			<uni-search-bar :focus="true" clearButton="none" placeholder="搜索"></uni-search-bar>
		</view>

		<!-- 轮播图 -->
		<swiper class="bannerContent" autoplay circular>
			<swiper-item v-for="(item, index) in swiper.img" :key="index">
				<image :src="item" class="swiperImg"></image>
			</swiper-item>
		</swiper>

		<!-- 金刚区 -->
		<uni-grid class="grid" :column="5" :highlight="true" :square="true" :showBorder="false">
			<uni-grid-item v-for="(item, index) in contentBar" :index="index" :key="index">
				<view class="grid-item-box">
					<!-- 自定义图标 -->
					<uni-icons fontFamily="CustomFont" :size="25" color="#fff">{{item.src}}</uni-icons>
					<!-- 文字 -->
					<text class="text">{{ item.name }}</text>
				</view>
			</uni-grid-item>
		</uni-grid>
		
		<!-- 个性电台 -->
		<view class="radio-body">
			<uni-row>
				<!-- 第一列：左侧图片 -->
				<uni-col :span="9">
					<view class="radio-image" @click="goUrl('../play/play')">
						<image :src="content.img"></image>
						<view class="radio-text">
							<uni-icons type="headphones" color="#fff" size="60rpx"></uni-icons>
							<text>{{content.imgTitle}}</text>
						</view>
					</view>
				</uni-col>
				<!-- 第二列：右侧列表 -->
				<uni-col :span="15" v-for="(item, index) in content.list" :key="index">
					<uni-list-item :title="item.name" :note="item.disc">
						<template v-slot:footer>
							<image class="slot-image" :src="item.src" mode="widthFix"></image>
						</template>
					</uni-list-item>
				</uni-col>
			</uni-row>
		</view>
		
		<!-- 为你推荐 -->
		<uni-section :title="recommend.title" type="circle">
			<MusicListComponent :column="3" :list="recommend.list"></MusicListComponent>
		</uni-section>
		
		<!-- 最新专辑-->
		<uni-section :title="newest.title" type="circle">
			<MusicListComponent :column="3" :list="newest.list"></MusicListComponent>
		</uni-section>
		
		<!-- 独家内容 -->
		<uni-section :title="sole.title" type="circle">
			<MusicListComponent :column="2" :list="sole.list"></MusicListComponent>
		</uni-section>
	</view>
</template>

<script>
	// 引入mock.js模拟数据
	import {
		swiper, //轮播图数据
		contentBar, //金刚区数据
		content, //个性电台
		recommend, //为你推荐
		newest, //最新专辑
		sole //独家内容
	} from "../commons/mock.js"
	//引入组件
	import MusicListComponent from "./MusicListComponent"
	export default {
		name: "MusicTabPage",
		//注册组件
		components: {
			MusicListComponent
		},
		data() {
			return {
				swiper, //注册轮播图数据
				contentBar, //金刚区
				content, //个性电台
				recommend, //为你推荐
				newest, //最新专辑
				sole //独家内容
			};
		},
		methods:{
			//定义页面跳转的方法
			goUrl(str){
				uni.navigateTo({
					url:str //传入的路径参数
				});
			}
			
		}
	}
</script>

<style>

	/* 个性推荐 */
	.radio-body {
		margin: 60rpx 20rpx 20rpx;
	}

	
	.radio-image {/* 第一列图片 */
		position: relative;
	}

	.radio-image image {
		width: 90%;
		height: 275rpx;
	}

	.radio-text {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-60%, -50%);
		color: white;
		font-size: 30rpx;
		font-weight: bold;
		text-align: center;
	}

	.radio-text text {
		display: block;
		margin-top: 10rpx;
	}

	.slot-image{ /* 第二列图片 */
		display: block;
		margin-right: 10px;
		width: 50px;
		height: 50px;
	}

	/* 搜索框样式（保留一份） */
	.search-bar {
		width: 100%;
		background-color: #00c273;
	}

	/* 轮播图样式 */
	.bannerContent {
		width: 100%;
		height: 320rpx;
	}

	.bannerContent .swiperImg {
		width: 100%;
		height: 100%;
	}

	/* 引入金刚区字体图标 */
	@font-face {
		font-family: CustomFont;
		src: url('/static/iconfont.ttf');
	}

	/* 金刚区样式 */
	.grid {
		margin: -20rpx 27rpx;
		width: 93%;
	}

	.grid-item-box {
		flex: 1;
		position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/*#endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 30rpx 0;
		background-color: #00b86b;
	}

	/* 文字样式（保留一份） */
	.text {
		margin-top: 15rpx;
		font-weight: 600;
		color: #fff;
	}
</style>